<template>
	<view>
		<!-- #ifdef MP -->
		<text @tap="gotoSearch">导航栏</text>
		<!-- #endif -->
		<!-- 选项卡 -->
		<scroll-view scroll-x="true" class="scroll-view" style="height: 80rpx;" :scroll-into-view="scrollInto" scroll-with-animation show-scrollbar="false">
			<view class="scroll-view-item" style="height: 80rpx;line-height: 80rpx;"
			v-for="(item,index) in tabBars" :key="index"
			@click="changeTab(index)"
			:id="'tab'+index"
			>
				<text class="f14 px-10"
			:class="tabIndex===index?'main-text-color bd-bottom-main-color':''">{{item.name}}</text>
			</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" :style="'height: '+scrollH+'px;'" @change="swipTab">
			<swiper-item v-for="(item,index) in tabBars" :key="index">
				<scroll-view scroll-y="true" :style="'height: '+scrollH+'px;'">
					<!-- TODO 下边的模块都放进后，实现不同分类的统一展现形式，需要设计好数据的格式 -->
					<!-- 轮播图 -->
					<swiperComp :res="swiperImgs"></swiperComp>
					<!--分类-->
					<items :dataArr="itemList"></items>
					<!--分割-->
					<devider></devider>
					<!--广告图高530，宽对半-->
					<advThree :dataObj="threeAdv"></advThree>
					
					<devider></devider>
					<!-- 卡片 -->
					<card bodyImg="/static/images/img1.jpg" headTitle="Card 1"></card>
					<!-- <card>
						<block slot="title">Card One</block>
						<block slot="body">Body One</block>
					</card> -->
					<!-- 公共列表 -->
					<commonList :searchList="searchList"></commonList>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import swiperComp from '@/components/swiperComp/swiperComp.vue'
	import items from '@/components/itemsComp/itemsComp.vue'
	import advThree from '@/components/adv/advThree.vue'
	import commonList from '@/components/common/commonList.vue'
	/* import card from '@/components/common/card.vue' */
	export default {
		components:{
			swiperComp,
			items,
			advThree,
			commonList
			//card
		},
		data() {
			return {
				title: 'Hello',
				scrollH: 500,
				scrollInto: 'tab0',
				tabIndex:0,
				tabBars: [
					{
						name: '小班'
					},
					{
						name: '大班'
					},
					{
						name: '幼儿园'
					},
					{
						name: '小学'
					},
					{
						name: '初中'
					},
					{
						name: '高中'
					},
					{
						name: '大学'
					},
					{
						name: '研究生'
					},
					{
						name: '博士'
					},
					{
						name: '博士后'
					},
					{
						name: '博导'
					}
				],
				swiperImgs: [{
					src: "../../static/images/img1.jpg"
				},{
					src: "../../static/images/img2.jpg"
				},{
					src: "../../static/images/img3.jpg"
				}],
				itemList: [
					{
						src: '',
						desc: 'model1'
					},
					{
						src: '',
						desc: 'model2'
					},
					{
						src: '',
						desc: 'model3'
					},
					{
						src: '',
						desc: 'model4'
					},
					{
						src: '',
						desc: 'model5'
					},
					{
						src: '',
						desc: 'model6'
					},
					{
						src: '',
						desc: 'model7'
					},
					{
						src: 'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2760321135,1640872053&fm=58',
						desc: 'model8'
					},
					{
						src: '',
						desc: 'model9'
					},
					{
						src: '',
						desc: 'model10'
					}
				],
				threeAdv: {
					left: {
						src: '/static/images/left1.jpg'
					},
					right1: {
						src: '/static/images/right1.jpg'
					},
					right2: {
						src: '/static/images/right2.jpg'
					} 
				},
				midCard:{
					title: 'Card1',
					img: '/static/images/card1.jpg'
				},
				searchList: [
					{
						img: '/static/images/card1.jpg',
						title: 'Num1',
						desc:'xasdxsd',
						oprice: '212',
						pprice: '121'
					},
					{
						img: '/static/images/right2.jpg',
						title: 'Num2',
						desc:'xasdxsd',
						oprice: '222',
						pprice: '121'
					}
				]
			}
		},
		onNavigationBarSearchInputClicked() {
			this.gotoSearch()
		},
		onLoad() {
			// 获取可视区域高度
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(82)
				}
			})
			this._initPage()
			/* uni.onNavigationBarSearchInputClicked(()=>{
				uni.navigateTo({
					url:'../search/search'
				})
			}) */
		},
		// 上拉onReachBottom
		// 下拉刷新
		onPullDownRefresh() {
			uni.showLoading({
			    title: '加载中。。。'  
			})
			setTimeout(()=>{
				this.searchList = this.searchList.concat(this.searchList)
				uni.stopPullDownRefresh()
				uni.hideLoading()
			}, 500)
		},
		methods: {
			_initPage() {
				uni.showLoading({
				    title: '加载中。。。'  
				})
				setTimeout(()=>{
					uni.hideLoading()
				}, 500)
			},
			gotoSearch() {
				uni.navigateTo({
					url:'../search/search'
				})
			},
			changeTab(index) {
				if (this.tabIndex === index) return
				this.tabIndex = index
				this.scrollInto = 'tab' + index
				// 切换的时候查询data或者统一查询好
				uni.showLoading({  
				    title: '加载中。。。'  
				})
				setTimeout(()=>{
					uni.hideLoading()
				}, 500)
			},
			swipTab(e) {
				this.changeTab(e.detail.current)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
